<script type="text/javascript">
  window.barchart = <%= raw(Poison.encode!(@order_datepoints)) %>
    window.linechart = <%= raw(Poison.encode!(@payment_datapoints)) %>
</script>

<div class="list-container">
  <div class="row m-0 list-header">
    <div class="col-10 p-0">
      <h2>Dashboard</h2>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col">
        <form action="/dashboard" class="form-inline my-2 float-sm-right">
          <div class="form-group p-2">
            <label for="from" class="col-form-label-sm pr-2">From : </label>
            <input class="form-control form-control-sm" type="date" name="from" value=<%= @start_date %> onchange="this.form.submit()">
          </div>
          <div class="form-group p-2">
            <label for="to" class="col-form-label-sm pr-2">To : </label>
            <input class="form-control form-control-sm" type="date" name="to" value=<%= @end_date %> onchange="this.form.submit()">
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <h5>Orders Status</h5>
        <hr />
        <div class="table-contaner orderlist">
          <div class="row">
            <div class="col-12">
              <table class="table table-striped">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col"> State </th>
                    <th scope="col"> Count</th>
                  </tr>
                </thead>
                <tbody style="width: 100%;" class="text-capitalize">
                  <%= if @order_state_counts != [] do %>
                  <%= for order_state_count <- @order_state_counts do %>
                  <tr>
                    <td>
                      <%= order_state_count.state %>
                    </td>
                    <td>
                      <%= order_state_count.count %>
                    </td>
                  </tr>
                  <% end %>
                  <% else %>
                  <tr>
                    <td colSpan="2" class="text-center">
                      No records found for the date.
                    </td>
                  </tr>
                  <% end %>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <h5>Products Status</h5>
        <hr />
        <div class="table-contaner orderlist">
          <div class="row">
            <div class="col-12">
              <table class="table table-striped">
                <thead class="thead-dark">
                  <tr>
                    <th scope="col"> State </th>
                    <th scope="col"> Count</th>
                  </tr>
                </thead>
                <tbody>
                  <%= if @product_state_counts != [] do %>
                  <%= for product_state_count <- @product_state_counts do %>
                  <tr>
                    <td>
                      <%= product_state_count.state %>
                    </td>
                    <td>
                      <%= product_state_count.count %>
                    </td>
                  </tr>
                  <% end %>
                  <% else %>
                  <tr>
                    <td colSpan="2" class="text-center">
                      No records found for the date.
                    </td>
                  </tr>
                  <% end %>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <div class="table-contaner orderlist">
          <div class="row">
            <div class="col-12">
              <div class="card p-2">
                <canvas id="barChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="table-contaner orderlist">
          <div class="row">
            <div class="col-12">
              <div class="card p-2">
                <canvas id="lineChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
